body {
    background-image: url(images/starfield.png);
    background-size: contain;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 60px 1150px 200px;
    font-family: 'Verdana', sans-serif;
    color: greenyellow;
}

.main {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    height: 100%;
    display: grid;
    grid-template-columns: 400px 600px 400px;
    grid-template-rows: 60px 600px 450px 1fr;
}

.topbar {
    grid-column-start: 1;
    grid-column-end: 4;
    width: 100%;
    border: 3px solid;
    border-color: black;
    height: 45px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 20px 20px 20px 20px;
}

#hub {
   transform: translate(0px, 5px);
    scale: 1.025;
    background-color: #690069
}

@keyframes mentionrainbow{
    0%{
    color: red;
    }
    17%{
    color: orange;  
    }
    33%{
     color: yellow; 
    }
    50%{
     color: forestgreen;
    }
    67%{
     color: dodgerblue;
    }
    83%{
     color: darkviolet;
    }
    100%{
     color: indianred;
    }
}

@keyframes bluflash{
    0%{
        color: #0000c7;
    }
    100%{
        color: deepskyblue;
        text-shadow: 0 0 40px #0062cb;
    }
}

@keyframes clickgrow{
    0%{
        scale: 1;
    }
    100%{
        scale: 1.25;
    }
}

.barbutton {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    color: greenyellow;
    cursor: pointer;
    background-color: purple;
    border: 3px solid;
    border-color: mediumpurple;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.barbutton:hover{
    background-color: mediumpurple;
    border-color: purple;
    color: lawngreen;
}

.comicbutton {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    font-size: 1.40em;
    color: white;
    -webkit-text-stroke: 1px black;
    cursor: pointer;
    background-image: url(/images/rainbow.gif);
    border: 3px solid;
    border-color: mediumpurple;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.comicbutton:hover{
    width: 105%;
    height: 105%;
    border-color: white;
    color: black;
    -webkit-text-stroke: 1px white;
}

.hub {
    width: 100%;
    height: 100%;
    background-color: purple;
    border: 3px solid;
    border-color: mediumpurple;
    border-radius: 20px 0px 0px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color:greenyellow;
    cursor: pointer;
}

.hub:hover{
    background-color: mediumpurple;
    border-color: purple;
    color: lawngreen;
}

.indieweb {
    width: 100%;
    height: 100%;
    background-color: purple;
    border: 3px solid;
    border-color: mediumpurple;
    border-radius: 0px 20px 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color:greenyellow;
    cursor: pointer;
}

.indieweb:hover{
    background-color: mediumpurple;
    border-color: purple;
    color: lawngreen;
}

.welimgcontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 600px;
    min-height: 600px;
}

.welcomeimage {
    max-width: 100%;
    max-height: 100%;
    grid-column-start: 2;
    grid-row-start: 1;
}

.leftparholder {
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.wheresection {
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 2;
    min-width: 300px;
    padding: 15px;
    max-height: 600px
}

.whereami {
    max-width: 300px;
}

.whereparagraph {
    font-size: 1.25rem;
    background-color: #432c73;
    border: 3px solid;
    padding: 5px;
}

.whosection {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    min-width: 300px;
    padding: 15px;
    max-height: 600px
}

.whoparagraph {
    font-size: 1.25rem;
    background-color: greenyellow;
    border: 3px solid;
    border-color: mediumslateblue;
    color: #1f3dff;
    padding: 5px;
    text-align: end;
}

.whoareyou {
    max-width: 300px;
}

.tswafmention {
    animation-name: mentionrainbow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.blumention {
    animation-name: bluflash;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

.updateholder {
    grid-column-start: 1;
    grid-row-start: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.updatesection {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #966500;
    margin: 15px;
    border: 3px solid;
    border-color: goldenrod;
    max-width: 300px;
    min-height: 200px;
    border-radius: 30px;
}

.updateheader {
    font-size: 1.5em;
}

.updatetext {
   padding: 10px;
}

.chatboxholder {
    grid-column-start: 2;
    grid-row-start: 3;
    width: 100%;
    height: 100%;
    background-color: rebeccapurple;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
}

.chatbox {
  width: 90%;
  height: 400px;
}

.dumbgifboxholder {
    grid-column-start: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.dumbgifbox {
    margin: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    background-color: goldenrod;
    color: #fffd95;
    border: 5px solid;
    border-color: darkgoldenrod;
    border-radius: 30px;
    min-width: 300px;
    max-height: 90%;
}

.dumbgifann {
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: center;
    font-size: 1.5em;
}

.tenor-gif-embed {
    grid-column-start: 1;
    grid-column-end: 3;
    max-height: 100%;
}

.itchanges {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.creepig {
    max-width: 100%;
    max-height: 50%;
}

.dyk {
    font-size: 0.9em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.minecraftnotif {
    display: flex;
    flex-direction: column;
    max-width: 33%;
    color: saddlebrown;
    background-color: yellowgreen;
    margin-right: 15px;
    border: 4px solid;
}

.linkboxbig {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 80px;
    margin-right: 80px;
    background-color: #972951;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 3px solid;
    border-color: darkmagenta;
}

.mybannerbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0d319e;
    padding: 30px;
    height: 250px;
    min-width: 150px;
    border-radius: 30px;
    border: 3px solid;
    border-color: lawngreen;
    transform: translate(-4px);
}

.psbanner {
    grid-column-start: 2;
    grid-row-start: 2;
}

.bannertext {
    text-align: center;
}

.smallestcopy {
    font-size: 0.5em;
    text-align: center;
}

.neighbortext {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    background-color: #ffdd00;
    padding: 5px;
    border: 3px solid;
    color: rebeccapurple;
    border-color: darkgoldenrod;
    font-size: 1.1em;
    animation-name: clickgrow;
    animation-duration: 0.25s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

.neighbortext:hover{
    background-color: lightgoldenrodyellow;
    text-shadow: 0px 0px 20px #f7cfff;
    color: #c1a2ff;
}

.instagrampromo {
    grid-column-start: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}

.tapaspromo {
    grid-column-start: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}

.YTpromo {
    grid-column-start: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}

.mydiscordbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0ed7ac;
    padding-left: 30px;
    padding-right: 30px;
    height: 250px;
    min-width: 150px;
    border-radius: 30px;
    border: 3px solid;
    transform: translate(4px);
    border-color: greenyellow;
    color: mediumblue;
}

.promobutton {
    max-height: 100px;
    max-width: 100px;
    transition: 50ms ease;
}

.promobutton:hover{
    scale: 1.15;
}

.uplpromotext {
    text-align: center;
    font-size: 0.95em;
}

.dcbutton {
    max-height: 125px;
    max-width: 125px;
    transition: 50ms ease;
}

.dcbutton:hover{
    scale: 1.15;
}

.dcannou {
    text-align: center;
    font-size: 1em;
}

.dcotext {
    text-align: center;
    font-size: 0.8em;
}